<template>
    <div id="search">
        <input list="browsers" type="search" placeholder="搜索歌曲、歌单。。。" v-model="SearchWord" @focus="focus()" @input="inp()">
        <span class="mui-icon mui-icon-search" @click='Search()'></span>
    </div>
</template>
<script>
export default {
    computed: {
        keyword: function() {
            return this.$store.state.mutations.keyword;
        }
    },
    watch: {
        'keyword': function(n, o) {
            //   console.log('new:',n);
            this.SearchWord = n;
        }
    },
    data() {
        return {
            SearchWord: '',
            msgRes: '',
        }
    },
    methods: {
        flag() {
            if (this.SearchWord) {
                this.$router.push('/searchSong/SongRes');
                console.log('你的搜索的关键字是' + this.SearchWord);
            } else {
                this.$router.push('/searchSong/hotSearch');
                console.log('null');
            }
        },
        inp() {
            this.flag();
            var that = this;
            var formdata = new FormData();
            formdata.append('keyword', that.SearchWord)
            that.$http({
                url: '/Search',
                method: 'post',
                data: formdata
            }).then((res) => {
                if (res.data.error == '参数不合法') {
                    console.log('参数不合法');
                } else {
                    that.msgRes = res.data.data.info;
                    console.log(that.msgRes);
                    that.$store.dispatch('searchRes', res.data.data.info)
                }
            })
        },
        focus() {
            this.inp();
        },
        Search() {
            this.$router.push('/searchSong/SearchRes');
            console.log(this.SearchWord);
            var that = this;
            var formdata = new FormData();
            formdata.append('keyword', that.SearchWord)
            that.$http({
                url: 'http://118.89.51.37:3000/Search',
                method: 'post',
                data: formdata
            }).then((res) => {
                if (res.data.error == '参数不合法') {
                    console.log('参数不合法');
                } else {
                    var keys = '';
                    localStorage.getItem('val') ? keys = JSON.parse(localStorage.getItem('val')) : keys = [];
                    keys.push({
                        'val': that.SearchWord,
                    })
                    localStorage.setItem('val', JSON.stringify(keys))
                    console.log(res.data);
                    that.$store.dispatch('searchRes', res.data.data.info)
                }
            })
        },
    }
}
</script>

<style scoped>
/* 搜索部分 */

#search {
    margin-top: 5px;
    display: flex;
    justify-content: center;
}

#search>input {
    width: 82%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 55px;
    font-size: 13px;
    padding: 6px 15px;
    height: 25px;
    color: #c0c0c0;
    text-align: left;
    cursor: pointer;
}

#search>input::placeholder {
    color: #999;
    text-align: left;
    font-size: 12px;
}

#search>span {
    color: #888;
    margin-top: 3px;
    margin-left: 6px;
    font-size: 21px;
}


#list {
    position: absolute;
    left: 0;
    top: 76px;
    width: 100%;
    display: flex;
    padding-right: 18px;
    padding-left: 1px;
}

#list li {
    width: 82%;
    text-align: center;
    margin: auto;
    background-color: #c3c3c3;
}
</style>

